//点击返回顶部
let scrolltop = document.documentElement.scrollTop
$("#foot ul .li3").click(function () {
    $("html,body").animate({ scrollTop: 0 }, 500)
})
//点击返回图标返回首页
$("#header .fh").click(function(){
    window.location.href="../index.html"
})
//渲染nav
fetch("http://chst.vip:1234/api/getbaicaijiatitle")
.then(body=>body.json())
.then(res=>{
    let arr = res.result
    let str = ""
    arr.forEach(item => {
        str+=`
        <li titleId=${item.titleId}>${item.title}</li>
        `
    });
    $("#nav .top .top_ul").html(str)
})
//初始化默认渲染页面结构--------------------------------------------
function render(titleid=0){
    fetch(`http://chst.vip:1234/api/getbaicaijiaproduct?titleid=${titleid}`)
    .then(body=>body.json())
    .then(res=>{
        let arr = res.result
        let str = ""
        arr.forEach(item => {
            let productImg = item.productImg
            //reg取出地址src
            reg = /^<[^<]+\s+src="([^''""]*)"/
            productImg = reg.exec(productImg)[1]
            str+=`
            <div class="boxpb">
                    <img src="${productImg}" alt="">
                    <p class="jieshao">
                        ${item.productName}
                    </p>
                    <p class="jiage">
                        ${item.productPrice}
                    </p>
                    <div class="getloading">
                        <div class="n1">
                            <span class="tcs">0%</span>
                        </div>
                        <span class="n2">已领0/剩余72</span>
                    </div>
                    <div class="get">
                        <span class="s1">点此领取优惠券</span>
                        <span class="s2">下单链接</span>
                    </div>
                </div>
            `
        });
        $("#main .lis li").html(str)
    })
}
render()

//注册点击事件 领取优惠券
//一定时间内 填充图形宽度从0跑完3.2rem
//同时计算此时间内 设定定时器时间 同步跑完领券数量 百分比显示
$("#main .lis li").on("click",".boxpb .get .s1",function(e){
    let _this = e.target
    var setT = 3000
    $(_this).parent().prev().find(".n1 .tcs").animate({width:120},setT)
    //xms内变化完成0-100大约一百次的变化，折合变化一次数字约为x/100
    var k = setT/100
    var i = 0
    var dsq1 = setInterval(function(){
        i++
        $(_this).parent().prev().find(".n1 .tcs").text(`${i}%`)
    },k)
    //xms内变化完成0-72大约72次的变化，折合变化一次数字约为x/71
    var j = setT/72
    var u = -1
    var o = 73
    var dsq2 = setInterval(function(){
        u++
        o--
        $(_this).parent().prev().find(".n2").text(`已领${u}/剩余${o}`)
    },j)
    //设一个延时定时器，setT时间后关闭全部的间歇定时器
    setTimeout(function(){
        clearInterval(dsq1)
        clearInterval(dsq2)
    },setT)
})

//注册点击事件请求不同的数据
$("#nav .top .top_ul").on("click","li",function(e){
    let _this = e.target
    $(_this).siblings().removeClass("select")
    $(_this).addClass("select")
    let titleid = $(_this).attr("titleid")
    render(titleid)
})